<!DOCTYPE html>
<html lang="zh" mode="light" xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="~{theme/Grace/common :: meta}"></div>
    <meta property="og:title" th:content="${'标签 | ' + #servletContext.getAttribute('configMap')['blog_name']}" />
    <title>标签 | [[${#servletContext.getAttribute('configMap')['blog_name']}]]</title>
    <div th:replace="~{theme/Grace/common :: link}"></div>
</head>

<body>
<!-- 导航 -->
<div th:replace="~{theme/Grace/common :: nav}"></div>
<div class="wrap" id="wrap">
    <!-- 头部 -->
    <header class="header">
        <!-- 封面 -->
        <div class="cover">
            <span th:if="${#strings.startsWith(currentNav.cover,'http')}">
                <img class="lazyload" th:data-original="@{${currentNav.cover}}">
            </span>
            <span th:if="${#strings.startsWith(currentNav.cover,'http') == false}">
                <img class="lazyload" th:data-original="@{${prefix} + '/source/images/tag.png'}">
            </span>
        </div>

        <!-- 商标 -->
        <div class="brand animate-box" data-animate-effect="fadeIn">
            <p class="title"><span class="title-head">『</span> 标签 <span class="title-tail">』</span></p>
            <p class="sub-title"></p>
        </div>
    </header>
    <!-- 主要内容 -->
    <main class="main">
        <div class="container">
            <div class="tags-detail">
                <div class="tags-nav">
                    <span>当前位置: <a data-pjax th:href="@{/}">首页</a> / <span>标签</span> </span>
                </div>
                <div class="tags-content">
                    <a data-pjax class="tag" th:href="@{'/tags/'+${tag.name}+'/'}" th:each="tag,status : ${tagList}">[[${tag.name}]]&nbsp;</a>
                </div>
                <div class="tags-content" th:if="${#lists.isEmpty(tagList)}" th:style="'text-align:center;'" th:text="'~~暂无标签~~'"></div>
            </div>
        </div>
    </main>
    <script>
        let colorArr = ["#1ABC9C", "#2ECC71", "#3498DB", "#9B59B6", "#34495E", "#F1C40F", "#E67E22", "#E74C3C", "#000"];
        let elements = document.getElementsByClassName("tag");
        for (let i = 0; i < elements.length; i++) {
            let element = elements[i];
            let index = Math.floor(Math.random() * colorArr.length);
            element.style.backgroundColor = colorArr[index];
            element.style.color = "#fff";
        }
    </script>
</div>
<!-- 尾部 -->
<div th:replace="~{theme/Grace/common :: footer}"></div>
<div th:replace="~{theme/Grace/common :: script}"></div>
</body>

</html>
